<script setup>
import { ref, watchEffect } from 'vue';
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { watch } from 'vue';
const icons = {
	FindsourceActive: 'https://cdn7.axureshop.com/demo/1972680/images/%E9%A6%96%E9%A1%B5/u63_selected.svg',
	FindsourceImg: 'https://cdn7.axureshop.com/demo/1972680/images/%E9%A6%96%E9%A1%B5/u63.svg',
	ManagerCarsActive: 'https://cdn7.axureshop.com/demo/1972680/images/%E9%A6%96%E9%A1%B5/u57_selected.svg',
	ManagerCarsImg: 'https://cdn7.axureshop.com/demo/1972680/images/%E9%A6%96%E9%A1%B5/u57.svg',
	userCenterActive: 'https://cdn7.axureshop.com/demo/1972680/images/%E9%A6%96%E9%A1%B5/u60_selected.svg',
	userCenterImg: 'https://cdn7.axureshop.com/demo/1972680/images/%E9%A6%96%E9%A1%B5/u60.svg'



}
const active = ref()
const map = new Map([
	['find', 0],
	['managercars', 1],
	['my', 2],
])

const route = useRoute()


watch(() => route.path, // 监听路由路径变化改变tab

	(newPath, oldPath) => {
		newPath
		const pathSegments = newPath.split('/');

		// console.log(pathSegments);
		let act = map.get(pathSegments[2]);
		if (act == undefined) act = -1
		active.value = act
	},
	{
		immediate: true
	}
);



</script>

<template>

	<div class="allBox">
		<!-- 上方内容 -->
		<div class="showContent">
			<div class="wrapper">

				<!-- <router-view>
				</router-view> -->
				<router-view v-slot="{ Component }">
					<keep-alive :include="Source">
						<component :is="Component" />
					</keep-alive>
				</router-view>
			</div>


		</div>

		<!-- 底部导航栏 -->
		<footer v-if="$route.meta.isshow != false">
			<van-tabbar v-model="active" active-color="#1678ff" style="background-color: '#333333' ;"
				inactive-color="black" :border="false">
				<van-tabbar-item :to="{ name: 'Findsource' }">
					寻找货源
					<template #icon="props">
						<img :src="props.active ? icons.FindsourceActive : icons.FindsourceImg" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item :to="{ name: 'ManagerCars' }">车辆管理
					<template #icon="props">
						<img :src="props.active ? icons.ManagerCarsActive : icons.ManagerCarsImg" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item :to="{ name: 'userCenter' }">个人中心
					<template #icon="props">
						<img :src="props.active ? icons.userCenterActive : icons.userCenterImg" />
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</footer>
	</div>

</template>
<!-- 主页样式 -->
<style lang="scss" scoped>
:deep(.kk) {
	height: 0px;
	overflow: hidden;
}


.allBox {
	color: white;
	height: 100vh;
}

.showContent {
	height: calc(100vh - 0.5rem);
	overflow: hidden;
}

.wrapper {
	height: 100%;
	overflow: auto;
	display: flex;
	flex-direction: column;
	background-color: #f2f2f2;
}

footer {
	height: 0.5rem;

	// 底部导航
	.van-tabbar {
		background-color: white;
	}

	.van-tabbar-item--active {
		background-color: white;
	}
}
</style>